import React, { Component } from 'react';

class Circle extends Component {
    constructor(props) {
        super(props)
        this.initCanvas = this.initCanvas.bind(this)
    }
    initCanvas() {
        const {
            x0,//原点坐标
            y0,
            r,// 半径
            lineWidth, // 画笔宽度
            strokeStyle, //画笔颜色
            Percentage,// 进度百分比
        } = this.props.circleData;

        let ele = document.getElementById("time_graph_canvas")
        let circle = ele.getContext("2d");
        
        //创建背景圆
        circle.lineWidth = lineWidth; // 线的宽度
        circle.strokeStyle = strokeStyle; // 边框色
        circle.lineCap = 'round'; // 线帽的样式
        circle.beginPath(); // 开始一个新的路径
        circle.arc(x0, y0, r, 0, 2 * Math.PI, false); // 用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
        circle.stroke(); // 对当前路径进行描边

        //创建渐变圆环
        /*let g = circle.createLinearGradient(x0, 0, x0 + r * Math.cos(Percentage * (Math.PI * 2)), y0 + r * Math.sin(this.props.Percentage * (Math.PI * 2)));  //创建渐变对象  渐变开始点和渐变结束点
        g.addColorStop(0, LinearGradientColor1); //添加颜色点
        g.addColorStop(1, LinearGradientColor2);*/
        circle.lineWidth = lineWidth //设置线条宽度
        circle.lineCap = 'round';
        circle.strokeStyle = '#1890FF';
        circle.font="18px Arial";
        circle.textAlign = 'center'
        circle.fillText('1234', 80, 80);
        circle.textBaseline='middle'
        circle.beginPath();//开始一个新的路径
        circle.arc(x0, y0, r, -Math.PI / 2, -Math.PI / 2 - Percentage * (Math.PI * 2), true);
        circle.stroke();//对当前路径进行描边
    }

    componentDidMount() {
        this.initCanvas()
    }
    componentDidUpdate() {
        this.initCanvas()
    }
    
    render() {
        const { canvaswidth, canvasheight } = this.props
        return (
            <canvas id="time_graph_canvas" width={canvaswidth} height={canvasheight}></canvas> 
        )
    }
}
export default Circle;
